<template>
  <div id="box">
    <div class="box-left">
      <div class="header">
        <div class="inbox">
          <span
            ><el-icon><search /></el-icon
          ></span>
          <input type="text" placeholder="搜索" />
        </div>
        <div class="nowdata">
          <el-calendar ref="calendar">
            <template #header="{ date }">
              <el-button-group>
                <el-button size="mini" @click="selectDate('prev-month')"
                  ><el-icon><caret-left /></el-icon
                ></el-button>
                <span>{{ date }}</span>
                <el-button size="mini" @click="selectDate('next-month')"
                  ><el-icon><caret-right /></el-icon
                ></el-button>
              </el-button-group>
            </template>
          </el-calendar>
        </div>
        <div class="he-right">
          <div class="nordiv">日</div>
          <div class="nordiv active">周</div>
          <div class="nordiv">月</div>
          <div class="nordiv">年</div>
        </div>
      </div>
      <div class="mainbody">
        <el-table :data="tableData" border show-summary style="width: 100%">
          <el-table-column prop="id" label="时间" />
          <!-- <el-table-column prop="name" label="Name" /> -->
          <el-table-column prop="amount1" sortable label="周一" />
          <el-table-column prop="amount2" sortable label="周二" />
          <el-table-column prop="amount3" sortable label="周三" />
          <el-table-column prop="amount3" sortable label="周四" />
          <el-table-column prop="amount3" sortable label="周五" />
          <el-table-column prop="amount3" sortable label="周六" />
          <el-table-column prop="amount3" sortable label="周日" />
          <el-table-column prop="amount3" sortable label="备注" />
        </el-table>
        <div class="kechengbox">
          <div
            class="item"
            v-for="item in list"
            :key="item.id"
            :style="{
              'grid-area': `${item.kecheng[0] + 1}  / ${item.day + 1} / ${
                item.kecheng[item.kecheng.length - 1] + 2
              } / ${item.day + 2}`,
            }"
            :class="{
              itemone: Number(item.color) === 1,
              itemtwo: Number(item.color) === 2,
              itemthree: Number(item.color) === 3,
            }"
          >
            <div class="newsbox">
              <p class="gongsi">某某公司会议预定</p>
              <p class="shijian">09:00&nbsp;-&nbsp;10:00</p>
            </div>
          </div>
        </div>
        <div class="litbox" @click="abc">
          <span>+&nbsp;新建</span>
          <!-- <button @click="abc">wuyu</button> -->
        </div>
      </div>
    </div>
    <div class="box-right">
      <div class="section1">
        <div class="sec1-one"><p>2021</p></div>
        <div class="sec1-two">
          <p><span>12</span></p>
        </div>
        <div class="sec1-three"><p>TWELFTH&nbsp;WEEKS</p></div>
        <div class="sec1-four"><p>星期四&nbsp;&nbsp;THURSDAY</p></div>
      </div>
      <div class="section2">
        <el-calendar ref="calendar" v-model="value">
          <template #header="{ date }">
            <el-button-group>
              <el-button size="mini" @click="selectDate('prev-month')"
                ><el-icon><caret-left /></el-icon
              ></el-button>
              <span>{{ date }}</span>
              <el-button size="mini" @click="selectDate('next-month')"
                ><el-icon><caret-right /></el-icon
              ></el-button>
            </el-button-group>
          </template>
        </el-calendar>
      </div>
      <div class="section3">
        <div class="sec03-one">
          <div class="left01"></div>
          <p>已完成</p>
        </div>
        <div class="sec03-two">
          <div class="left02"></div>
          <p>进行中</p>
        </div>
        <div class="sec03-three">
          <div class="left03"></div>
          <p>未开始</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { CaretLeft, CaretRight, Search } from "@element-plus/icons-vue";
export default defineComponent({
  setup() {
    const calendar = ref();

    const selectDate = (val: string) => {
      calendar.value.selectDate(val);
    };
    // function abc() {
    //   console.log(calendar);
    //   console.log(selectDate);

    //   console.log(111);
    // }
    return {
      calendar,
      selectDate,

      tableData: [
        {
          id: "09:00",
          // name: "Tom",
          // amount1: "234",
          // amount2: "3.2",
          // amount3: 10,
        },
        {
          id: "10:00",
        },
        {
          id: "11:00",
        },
        {
          id: "12:00",
        },
        {
          id: "13:00",
        },
        {
          id: "14:00",
        },
        {
          id: "15:00",
        },
        {
          id: "16:00",
        },
        {
          id: "17:00",
        },
        {
          id: "18:00",
        },
        {
          id: "19:00",
        },
        {
          id: "20:00",
        },
      ],
      list: [
        {
          id: new Date().getTime(),
          day: 1,
          kecheng: [1, 2, 3],
          color: 1,
        },
        {
          id: new Date().getTime(),
          day: 3,
          kecheng: [5, 6],
          color: 2,
        },
        {
          id: new Date().getTime(),
          day: 5,
          kecheng: [9, 10, 11],
          color: 3,
        },
      ],
    };
  },
  components: {
    CaretLeft,
    CaretRight,
    Search,
  },
});
</script>

<style lang="scss">
html,
body {
  width: 100%;
  overflow-x: hidden;
}
#box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}
#box .box-left {
  min-width: 980px;
  max-width: 1650px;
  margin-right: 20px;
  width: 78%;
  min-height: 600px;
  background-color: #eeeeee;
  border-radius: 10px;
  .header {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #eeeeee;
    width: 100%;
    height: 11%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 20px;
    .inbox {
      width: 200px;
      height: 30px;
      background-color: #888888;
      font-size: 14px;
      border-radius: 5px;
      padding-left: 7px;
      .icon {
        color: #fcfcfc;
      }
      input {
        height: 30px;
        font-size: 12px;
        line-height: 30px;
        border: none;
        outline: none;
        margin-left: 5px;
        background-color: #888888;
      }

      input::-webkit-input-placeholder {
        color: #fcfcfc;
      }
    }
    .nowdata {
      color: #898989;
    }
    .el-calendar__body {
      display: none;
    }
    .el-calendar {
      background-color: #eeeeee;
    }
    .el-calendar__header {
      border: none;
    }
    .el-button-group {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 22px;
    }
    .el-icon {
      color: #898989;
    }
    .el-button {
      font-size: 14px;
      border: none;
      background-color: #eeeeee;
    }
    .he-right {
      width: 200px;
      height: 30px;
      background-color: #888888;
      border-radius: 5px;
      display: flex;
      justify-content: space-between;
      .nordiv {
        width: 42px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fcfcfc;
        font-size: 12px;
        border-radius: 10px;
      }
      .active {
        background-color: #2a8fef;
      }
    }
  }
  .mainbody {
    width: 100%;
    height: 89%;
    position: relative;
    .litbox {
      position: absolute;
      bottom: 5px;
      right: 10px;
      color: #2994fa;
      font-size: 14px;
      width: 50px;
      height: 18px;
      line-height: 18px;
      text-align: center;
    }
    .caret-wrapper {
      display: none;
    }
    .el-table__footer {
      display: none;
    }
    .cell {
      // text-align: center;
      color: #010101;
      font-family: Microsoft YaHei;
      font-weight: bold;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 39px;
      background-color: #eeeeee;
    }
    .el-table--fit {
      width: 100%;
      height: 94%;
      border-top: 1px solid #9b9b9b;
      border-bottom: 1px solid #9b9b9b;
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 10px;
      background-color: #eeeeee;
    }
    .el-table__cell {
      border-right: 1px solid #9b9b9b;
      border-bottom: 1px solid #9b9b9b;
      padding: 0px;
    }
    .kechengbox {
      width: 100%;
      height: 94%;
      min-height: 480px;
      position: absolute;
      left: 0px;
      top: 0px;
      // background-color: skyblue;
      display: grid;
      grid-template-columns: repeat(9, 1fr);
      grid-template-rows: repeat(13, 1fr);
      grid-column-gap: 0px;
      grid-row-gap: 0px;
      padding: 0px 0px 0px 1px;
      // opacity: 0;
      .item {
        border-radius: 10px;
        display: flex;
        align-items: center;
        .newsbox {
          width: 100%;
          height: 53px;
          text-align: center;
          .gongsi {
            font-size: 12px;
            color: #fffefe;
            line-height: 14px;
            margin-bottom: 26px;
          }
          .shijian {
            font-size: 11px;
            color: #fffefe;
            line-height: 13px;
          }
        }
      }
      .itemone {
        background-color: #2994fa;
      }
      .itemtwo {
        background-color: #de7532;
      }
      .itemthree {
        background-color: #42cd88;
      }
    }
  }
}
#box .box-right {
  width: 20%;
  height: 100%;
  min-width: 200px;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  // background-color: skyblue;
  .section1 {
    width: 100%;
    height: 28%;
    background-color: #eeeeee;
    padding: 15px 5px 0px 5px;
    border-radius: 3%;
    margin-bottom: 2%;
    .sec1-one {
      width: 100%;
      height: 14%;
      color: #888888;
      font-size: 1.05vw;
      p {
        line-height: 100%;
        text-align: right;
      }
    }
    .sec1-two {
      width: 100%;
      height: 35%;
      font-size: 3.5vw;
      color: #2994fa;
      p {
        line-height: 100%;
        text-align: center;
      }
    }
    .sec1-three {
      width: 100%;
      height: 18%;
      font-size: 1.6vw;
      margin-bottom: 5%;
      color: #2994fa;
      font-weight: bold;
      p {
        line-height: 100%;
        text-align: center;
      }
    }
    .sec1-four {
      width: 100%;
      height: 20%;
      font-size: 1.24vw;
      font-weight: bold;
      color: #2994fa;
      text-align: center;
      p {
        line-height: 100%;
      }
    }
  }
  .section2 {
    width: 100%;
    height: 43%;
    color: #898989;
    // background-color: #eeeeee;
    margin-bottom: 2%;

    .el-calendar__body {
      padding: 12px 12px 0px 12px;
    }
    .el-button-group {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 18px;
    }
    .el-calendar {
      background-color: #eeeeee;
    }
    .el-calendar-table__row {
      font-size: 14px;
    }
    thead th {
      text-align: center;
    }
    .current {
      border: none;
    }
    .prev {
      border: none;
      color: #898989;
    }
    .next {
      border: none;
      color: #898989;
    }
    .el-calendar-day {
      width: 30px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .el-icon {
      color: #898989;
    }
    .el-button {
      font-size: 14px;
      border: none;
      background-color: #eeeeee;
    }
    .el-calendar {
      // border-top-left-radius: 10px;
      // border-top-right-radius: 10px;
      border-radius: 10px;
    }
    .el-calendar__header {
      height: 35%;
      padding: 12px 20px 0px 20px;
    }
    .el-calendar__body {
      padding: 0px 12px 0px 12px;
    }
  }
  .section3 {
    width: 100%;
    height: 25%;
    background-color: #34364c;
    padding: 20px 5px 0px 15px;
    .sec03-one {
      width: 100%;
      height: 1.63vw;
      display: flex;
      margin-bottom: 1.63vw;
      .left01 {
        width: 1.63vw;
        height: 1.63vw;
        margin-right: 10px;
        background-color: #2994fa;
      }
      p {
        font-size: 18px;
        line-height: 1.63vw;
        color: #fffefe;
      }
    }
    .sec03-two {
      width: 100%;
      height: 1.63vw;
      display: flex;
      margin-bottom: 1.63vw;
      .left02 {
        width: 1.63vw;
        height: 1.63vw;
        margin-right: 10px;
        background-color: #de7532;
      }
      p {
        font-size: 18px;
        line-height: 1.63vw;
        color: #fffefe;
      }
    }
    .sec03-three {
      width: 100%;
      height: 1.63vw;
      display: flex;
      .left03 {
        width: 1.63vw;
        height: 1.63vw;
        margin-right: 10px;
        background-color: #42cd88;
      }
      p {
        font-size: 18px;
        line-height: 1.63vw;
        color: #fffefe;
      }
    }
  }
}
</style>
